<template>
	<div class="card-collection-wrapper">
		<el-form-item label="卡证类型" :prop="prop" :required="true">
			<el-select v-model="value" placeholder="请选择卡证类型" @change="changeValue" :disabled="disabled">
				<el-option v-for="item in defaultOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
			</el-select>
		</el-form-item>
		<div class="switch-container">
			<OCRSwitch :label="'OCR识别'" :value="isOpenOCR" @changeValue="setOpenOCR" :disabled="disabled || !value" />
		</div>
	</div>
</template>

<script>
import OCRSwitch from './OCRSwitch.vue';
export default {
	components: { OCRSwitch },
	props: {
		prop: {
			type: String,
			default: () => ''
		},
		cardCollectionOptions: {
			type: Array,
			default: () => []
		},
		value: {
			type: String,
			default: () => ''
		},
		isOpenOCR: {
			type: Boolean,
			default: () => false
		},
		disabled: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			defaultOptions: [],
			isOpen: false
		};
	},

	watch: {
		cardCollectionOptions(val) {
			if (val) {
				this.defaultOptions = [...val];
			}
		}
	},

	mounted() {
		if (this.cardCollectionOptions) {
			this.defaultOptions = [...this.cardCollectionOptions];
			console.log('defaultOptions:', this.disabled);
		}
	},
	methods: {
		changeValue() {
			console.log(this.prop);
			this.$emit('changeValue', this.value);
		},
		setOpenOCR(status) {
			this.$emit('setOpenOCR', status);
		}
	}
};
</script>

<style lang="less" scoped>
.card-collection-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.switch-container {
		margin: 0 0px 22px 20px;
	}
	.el-form-item {
		flex-grow: 1;
		.el-select {
			width: 100%;
		}
	}
}
</style>
